<template>
  <div class="full" :id="state.pid"></div>
</template>

<script setup>
import { ElMessage } from "element-plus";

const props = defineProps({
  vid: String,
});
const state = reactive({
  pm: {},
  myPlugin: null,
  curIndex: 0,
  pid: "bk" + Math.floor(Math.random() * 1000) + 1,
});
watch(
  () => props.vid,
  (newval) => {
    console.log("摄像头ID变化，重新播放:", props.vid);
    if (newval != null && newval != "") {
      console.log("摄像头ID变化，重新播放:", newval);
      nextTick(() => {
        play();
      });
    }
  }
);

const play = (bT, eT) => {
  console.log("开始播放，摄像头ID:", props.vid);
  let bt = bT
    ? bT
    : dateFormat(new Date(state.pm.beginTime), "YYYY-MM-DDTHH:mm:ss") +
      ".000+08:00";
  let et = eT
    ? eT
    : dateFormat(new Date(state.pm.endTime), "YYYY-MM-DDTHH:mm:ss") +
      ".000+08:00";
  let pm = {
    cameraId: props.vid,
    beginTime: bt,
    endTime: et,
    uuid: "",
  };

  //根据选择 获取监控点播放地址，尝试播放
  useApi.post("/dynamicview/ar/getplaybackurls", pm).then((res) => {
    let url = res.data.url || "";
    if (url != "") {
      // state.myPlugin.JS_StopRealPlayAll();
      state.myPlugin.JS_Play(url, { playURL: url, mode: 1 }, 0, bt, et).then(
        () => {},
        (err) => {
          play();
        }
      );
    } else {
      ElMessage.error("未获取到播放地址");
    }
  });
};
const initPlayer = () => {
  console.log("初始化播放器");
  if (state.myPlugin != null) return;
  state.myPlugin = new JSPlugin({
    szId: state.pid, //需要英文字母开头，唯一性，必填
    szBasePath: "/js/", // 必填,与h5player.min.js的引用目录一致
    bSupporDoubleClickFull: true, //是否支持双击全屏，默认true
    // 分屏播放，默认最大分屏4*4
    iMaxSplit: 1,
    iCurrentSplit: 1,
  });

  state.myPlugin.JS_SetWindowControlCallback({
    windowEventSelect: function (index) {
      //插件选中窗口回调
      state.curIndex = index;
    },
    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
      console.error("---播放错误:", iErrorCode, oError);
      //插件错误回调
      console.error(`window-${iWndIndex}, errorCode: ${iErrorCode}`, oError);
      //ElMessage.error(`播放失败, 错误码: ${iErrorCode}`);
      play();
    },
    windowFullCcreenChange: function (bFull) {
      //全屏切换回调
      state.myPlugin.JS_Resize();
    },
  });
};
const seek = (bt) => {
  let et =
    dateFormat(new Date(state.pm.endTime), "YYYY-MM-DDTHH:mm:ss") +
    ".000+08:00";
  play(bt, et);
  // if (state.myPlugin) {
  //   state.myPlugin.JS_Seek(state.curIndex, bt, et).then(
  //     () => {
  //       console.info("JS_Seek success");

  //     },
  //     (err) => {
  //       ElMessage.success("定位失败,错误码：" + err);
  //     }
  //   );
  // }
};
defineExpose({
  seek,
});
const destoryPlayer = () => {
  if (state.myPlugin) {
    state.myPlugin.JS_StopRealPlayAll();
    state.myPlugin.JS_DestroyWorker();
    state.myPlugin = null;
  }
};
onMounted(() => {
  let store = useMyStore();
  state.pm = store.params.backpm || {};
  if (state.pm.highCameraId) {
    initPlayer();
    play();
  }
});
//注销时 销毁组件
onBeforeUnmount(() => {
  destoryPlayer();
});
</script>

<style lang="scss" scoped>
.mainc {
  display: flex;
  flex-direction: column;
}

.titc {
  display: flex;
  justify-content: space-between;
  height: 40px;
  align-items: center;
  padding: 0 20px;

  .left {
    font-size: 18px;
    font-weight: bold;
  }
}

.infoc {
  display: flex;
  height: calc(100% - 30px);
  padding: 0 20px;
  z-index: 10;

  .video {
    width: calc(100% - 350px);
    height: calc(100vh - 140px);
    margin-right: 20px;
  }

  .info {
    flex: 1;
  }
}

.info {
  display: flex;
  flex-direction: column;
  gap: 5px;

  .tit {
    font-weight: 600;
    font-size: 18px;
    color: #293555;
    line-height: 25px;
  }

  .one {
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    gap: 10px;

    .p1 {
      font-weight: 600;
      font-size: 14px;
      color: #293555;
      line-height: 30px;
    }

    .p2 {
      font-size: 14px;
      color: #58627b;
      line-height: 26px;
    }
  }
}

.line {
  margin-top: 0px;
  margin-bottom: 5px;
  width: 100%;
  height: 1px;
  background: #d8d8d8;
}

.btns {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
</style>
